import { useDispatch } from 'react-redux'
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
import { getLogin } from '@/store/actions/login'
import { useHistory, useLocation } from 'react-router-dom'
import logo from '@/assets/logo.png'
import styles from './index.module.scss'

const Login = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  const location = useLocation()
  console.log(location)
  // 获取表单
  const onFinish = async (val) => {
    // console.log(val)

    try {
      // 异步变同步 await等待完成后再执行余下代码
      await dispatch(getLogin({ mobile: val.mobile, code: val.code }))
      message.success('登录成功！！', 2, () => {
        history.replace(location.state?.from ?? '/home')
      })
    } catch (e) {
      if (!e.response) {
        message.warning('网络繁忙,请稍后重试')
      } else {
        message.warning(e.response.data.message)
      }
    }
  }

  return (
    <div className={styles.root}>
      <div className="login">
        <Card
          bordered={false}
          style={{ width: 440 }}
          className="login-container"
        >
          <Form
            initialValues={{
              mobile: '13911111111',
              code: '246810',
              remember: true,
            }}
            validateTrigger={['onBlur', 'onChange']}
            onFinish={onFinish}
          >
            <img className="login-logo " src={logo} alt="" />

            <Form.Item
              name="mobile"
              rules={[
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '手机号码格式不对！',
                  validateTrigger: 'onBlur',
                },
                {
                  required: true,
                  message: '手机号不能输入为空！',
                },
              ]}
            >
              <Input size="large" placeholder="请输入您的手机号" />
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                {
                  len: 6,
                  message: '验证码6个字符',
                  validateTrigger: 'onChange',
                },
                {
                  required: true,
                  message: '请输入验证码',
                },
              ]}
            >
              <Input.Password
                size="large"
                maxLength={6}
                placeholder="请输入您的验证码"
              />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              rules={[
                {
                  required: true,
                  message: '请同意协议',
                },
              ]}
            >
              <Checkbox className="login-checkbox-label">
                我已阅读并同意「用户协议」和「隐私条款」
              </Checkbox>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" size="large" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  )
}

export default Login
